﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="../../Content/js/angular1.2.13.js"></script>
    <title></title>
    <style>
        input .ng-invalid {
            border: 1px solid red;
        }

        input .ng-valid {
            border: 1px solid green;
        }
    </style>
</head>
<body ng-app>
    <form name="form" novalidate>
        <label name="email">Your email</label>
        <input type="email" name="email" placeholder="Emaidl Address" ng-model="email" />
        <br />
        必填：<input type="text" required /><br />
        最小长度:<input type="text" ng-minlength="5" /><br />
        最大长度:<input type="text" ng-maxlength="20" /><br />
        匹配模式：<input type="text" ng-pattern="[a-zA-Z]" /><br />
        电子邮件：<input type="email" name="email" ng-model="user.email" /><br />
        数字:<input type="number" name="age" ng-model="user.age" /><br />
        Url:<input type="url" name="homepage" ng-model="user.facebook_url" /><br />
        <script>
            angular.module('app')
            .directive('oneToTen', function () {
                return {
                    required: '?ngModel',
                    link: function (scope, ele, attrs, ngModel) {
                        if (!ngModel) return;
                        ngModel.$parsers.unshift(
                            function (viewValue) {
                                var i = parseInt(viewValue);
                                if (i >= 0 && i < 10) {
                                    ngModel.$setValidity('onToTen', true);
                                    return viewValue;
                                } else {
                                    ngModel.$setValidity('oneToTen', false);
                                    return undefined;

                                }
                            }
                            )
                    }
                }
            })
        </script>

    </form>
</body>
</html>
